<template>
  <div class="analysisCss myTabClass myTypeClass components-container">
   
    <div class='chart-container'>
      <el-row :gutter="20" class="bigTitleCon">
          
          <h1>
						<span class="z_topTitle_block">沐威科技数据分析</span>
					</h1>
      </el-row>
      <el-row v-if="defaultDataSourceType === '0'" style="margin-top: 2em;box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 0px">
        <el-tabs type="card" v-model="activeName" @tab-click="setHandleClick">
          <el-tab-pane v-for="item in initDataArr" :label="item.label" :key="item.label" :name="item.name">                   
                  <!-- 数据分析tabs选项 -->
                          <el-row :gutter="40">
                            <el-col :xs="24" :sm="24" :md="24" :lg="8"  v-for="item in topTargetData" :key="item.title">
                                <div  class="blockCon" :style="'background:'+item.color" >
                                  <div class="iconHeadConCss">
                                      <img style="width:80px"  :src="'../../../../../static/img/'+item.img+'.png'">
                                    <p class="svgText">{{item.title}}</p>
                                  </div>
                                  <el-row>
                                      <div v-for="(itemValue,index) in item.itemArr" :key="index" class="card-text-con" >
                                      <div style="font-size: 1.8rem;">{{itemValue.value}}
                                      <div style="font-size: 1rem;">{{itemValue.text}} <icon-svg :icon-class="itemValue.line"  :iconStyle="'color:red; '"></icon-svg>
                                      </div>
                                      </div>
                                       </div>
                                  </el-row>
                                </div>
                            </el-col>
                          </el-row>
            <!-- 数据分析tabs选项end -->
            <!-- 数据分析tabs选项end -->
            
            <el-row class="bigTitleCon"style="background: #262544;padding:3em 1em;">
								<el-col :xs="24" :sm="18" :md="18" :lg="18" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">时间：</b>
									<el-radio-group @change="changeTime" text-color="white"  v-model="steelTime">
                  	<el-radio-button label="3001">今天</el-radio-button>
                  	<el-radio-button label="3002">最近七天</el-radio-button>
                  	<el-radio-button label="3003">近三十天</el-radio-button>
                	</el-radio-group>
                	<el-date-picker  @change="onContrast"
                                      type="daterange"
                                      align="right"
                                      unlink-panels
                                      start-placeholder="开始日期"
                                      end-placeholder="结束日期"
                                      style="padding-left:10px"  
                                      v-model="contrastDate" 
                                      :picker-options="contrastDateOption">
              		</el-date-picker>
              		<el-checkbox @change="selContrast" style="color: white;margin-left: 1em;">对比时间段</el-checkbox>
              		<el-date-picker  @change="changeCompareDate" v-if="contrast" 
                                      type="daterange"
                                      align="right"
                                      unlink-panels
                                      start-placeholder="对比开始日期"
                                      end-placeholder="对比结束日期"
                                      style="padding-left:10px"  
                                      v-model="contrastDate" 
                                      :picker-options="contrastDateOption">
              		</el-date-picker>
             		</el-col>
								<el-col :xs="24" :sm="6" :md="6" :lg="6" style="text-align: right;padding-right: 1em;">
									<el-radio-group @change="daysChange" text-color="white" v-model="daysSel">
                  	<el-radio-button label="4001">按天</el-radio-button>
                  	<el-radio-button label="4002">按月</el-radio-button>
                  	<el-radio-button label="4003">按周</el-radio-button>
                	</el-radio-group>
								</el-col>
						</el-row>
						
            <el-row class="factoryClass" >  
              <el-row class="bigTitleCon"style="">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">钢材类型：</b>
									<el-radio-group @change="changeSeetType" text-color="white"  v-model="seelTypeDefault">
                      <el-radio-button label="0">全部</el-radio-button>
                      <el-radio-button label="7001">盘螺</el-radio-button>
                      <el-radio-button label="7002">线材</el-radio-button>
                      <el-radio-button label="7003">螺纹</el-radio-button>
                      <el-radio-button label="7004">钢坯</el-radio-button>
                </el-radio-group>
             	</el-col>
						</el-row>
						<el-row class="bigTitleCon"style="">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">指标：</b>
                      <el-select @change="onTargetArrItem"  v-model="kfArrItem" >
                              <el-option
                                v-for="item in targetArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                      </el-select>
                    <el-checkbox style="color: white;margin-left: 1em;" @change="factoryExchange" v-model="checked">厂家/库房对比</el-checkbox>
                         <div v-if="modalCheck" class="myCheckBoxInput">
                            <el-input
                            placeholder="搜索钢厂或仓库"
                            prefix-icon="el-icon-search"
                            v-model="input21">
                          </el-input>
                          <p>钢厂/仓库</p>
                            <div style="font-size:10px;padding:5px"><span style="padding:0 10px 0 0 ">最多选择5个，最少1个</span><el-button @click="exchangeStore" size="mini">确定</el-button><el-button @click="exChangeStoreOut" size="mini">取消</el-button></div>
                           <el-checkbox-group v-model="checkList" class="myCheckBox">
                                <el-checkbox :label="itemFactoryName.name" v-for="(itemFactoryName,index) in factoryStoreNameArr" :key="itemFactoryName.providerId" style="margin-left: 1em;padding:5px 0;color:#fff" >{{itemFactoryName.name}}</el-checkbox>
                                <el-checkbox :label="itemHosueName.name" v-for="(itemHosueName,index) in storeHouseNameArr" :key="itemHosueName.providerId" style="color: #fff;margin-left: 1em;padding:5px 0" >{{itemHosueName.name}}</el-checkbox>
                             </el-checkbox-group>
                        </div>
             		</el-col>
						</el-row>
						<el-row>
                <el-col class="mayel-radio-group" :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
                  <div class="rowCon">
                    <div class="rowItem" v-for="(saleItem,index) in todayAllSale" :key="index" >
                      <p>{{saleItem.text}}</p>
                      <p style="font-size:1.5rem">{{saleItem.val+'('+saleItem.unit+')'}}<icon-svg :icon-class="saleItem.line"  :iconStyle="'color:red; '"></icon-svg></p>
                    </div>
                  </div>
                </el-col>
						</el-row>
						<el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <div class="tableCon">
                  <chart :chartId="item.refName" :ref="item.refName" :option="item.option" />
                </div>
              </el-col>
            </el-row>
          </el-row>
            <el-row style="text-align: center;background:#262544;">
									<p style="width: 100%;border-radius: 0;color:#3b8dee;margin-top: 5px;" v-show="!isShow" @click="isShow = true">查看详情&nbsp;&nbsp;<i class="el-icon-arrow-down"></i></p>
						</el-row>
            <el-collapse-transition>
							        <div v-show="isShow" class="factoryMoneyAssetTurnover">
							          <el-table
								      :data="tableData"
								      border
								       style="width: 100%;text-align:center">
								       <el-table-column label-class-name="text-center" label="2017/11/08">
									        <el-table-column
									          label="排名"
									          type="index"
									          label-class-name="blueHeader"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
									        <el-table-column
									          prop="name"
									          label="类型"
									          label-class-name="blueHeader"
									          class-name="text-center"
                             width="100">
									        </el-table-column>
									        <el-table-column
									          prop="data1"
									          label="销量(万吨)"
									          label-class-name="blueHeader"
									          class-name="text-center">
                             </el-table-column>
                              <el-table-column
									          prop="data2"
									          label="毛利(万元)"
									          label-class-name="blueHeader"
									          class-name="text-center"
                             >
									        </el-table-column>
									      </el-table-column>
								    </el-table>
							        </div>
							   </el-collapse-transition>
                 <el-row style="text-align: center;background:#262544;">
									<p style="width: 100%;border-radius: 0;color:#3b8dee;margin-top: 5px;" v-show="isShow" @click="isShow = false">收起&nbsp;&nbsp;<i class="el-icon-arrow-up"></i></p>
								</el-row>
                 <el-row  style="padding: 2rem 0 0 0px;background:#262544;" >
                  <p style="font-size:1rem;color:white">分公司经营状况排名</p>
                </el-row>
                <!-- 分公司经营状况排名 -->
           <el-row class="factoryClass">
           	<el-row class="bigTitleCon"style="">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">所有分公司：</b>
									<el-radio-group @change="changeFactoryItmem" text-color="white" fill="#339966" v-model="factoryItemId">
                        <el-radio-button :label="factoryItemName.id" v-for="factoryItemName in allFactoryName" :key="factoryItemName.id">{{factoryItemName.name}}</el-radio-button>
                  </el-radio-group>
             	</el-col>
						</el-row>
						<el-row class="bigTitleCon"style="">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">时间：</b>
									<el-radio-group @change="changeStateOfBusinessTime" text-color="white" fill="#339966" v-model="stateBussinessDefault">
                          <el-radio-button label="3001">今天</el-radio-button>
                          <el-radio-button label="3002">最近七天</el-radio-button>
                          <el-radio-button label="3003">近三十天</el-radio-button>
                  </el-radio-group>
                  <b style="color: white;margin-left: 1em;">指标：</b>
                  <el-select @change = "changeStateBusinessTarget"  v-model="stateBussinessTargetDefault" >
                              <el-option
                                v-for="item in factoryTargetArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                  </el-select>
                          <el-radio-group  @change="changeType" style="float:right" text-color="white" fill="#339966" v-model="filterType">
                            <el-radio-button label="按销量"></el-radio-button>
                            <el-radio-button label="按采购量"></el-radio-button>
                            <el-radio-button label="按毛利润"></el-radio-button>
                  </el-radio-group>
             	</el-col>
						</el-row>
            <el-row>
		            <el-col :xs="24" :sm="17" :md="17" :lg="17">
		              <div class="tableCon">
		                <chart  ref="factoryChart" :option="factoryChartOption" />
		              </div>
		            </el-col>
		           <el-col :xs="24" :sm="7" :md="7" :lg="7" class="factoryTabClass" style="text-align: left;width:27%">
		              <el-tabs v-model="activeRankName" @tab-click="setRankHandleClick" type="border-card">
		                <el-tab-pane label="销量排名" >
		                    <el-row class="corcleCon" v-for="(value,index) in moneySetValue" :key="index">
		                        <div class="corcleNum" :style="'background:'+value.color">
		                          {{index+1}}
		                        </div>
		                        <span style="float:left;color:white;float: left;color: white;margin-left: 10px;">{{value.xData}}</span> 
		                        <div style="float:right;color:white;">
		                        {{value.value}}吨 <span style="float:right">
		                          <icon-svg v-if="value.line" icon-class="up" :iconStyle="'color:white;width:20px'"></icon-svg> 
                              <div v-else style="width:20px"></div>
		                          </span>
		                        </div>
		                    </el-row>
		                </el-tab-pane>
		                <el-tab-pane  label="毛利润排名">
                      <el-row class="corcleCon" v-for="(value,index) in moneySetValue" :key="index">
		                        <div class="corcleNum" :style="'background:'+value.color">
		                          {{index+1}}
		                        </div>
		                        <span style="float:left;color:white;float: left;color: white;margin-left: 10px;">{{value.xData}}</span> 
		                        <div style="float:right;color:white;">
		                        {{value.value}}元 <span style="float:right">
		                          <!-- <icon-svg icon-class="downjt" :iconStyle="'color:white;width:10px'"></icon-svg> -->
		                          </span>
		                        </div>
		                    </el-row>
                    </el-tab-pane>
		                <el-tab-pane label="锁货量排名">
                      <el-row class="corcleCon" v-for="(value,index) in moneySetValue" :key="index">
		                        <div class="corcleNum" :style="'background:'+value.color">
		                         {{index+1}}
		                        </div>
		                        <span style="float:left;color:white;float: left;color: white;margin-left: 10px;">{{value.xData}}</span> 
		                        <div style="float:right;color:white;">
		                        {{value.value}}吨 <span style="float:right">
		                          <!-- <icon-svg icon-class="downjt" :iconStyle="'color:white;width:10px'"></icon-svg> -->
		                          </span>
		                        </div>
		                    </el-row>
                    </el-tab-pane>
		              </el-tabs>
		          </el-col>
          	</el-row>
            </el-row>
            <!-- 月度资金周转率 -->
             <el-row  style="padding: 2rem 0 0 0px;background:#262544;" >
                  <p style="font-size:1rem;color:white">各分公司资金周转率</p>
             </el-row>
             <el-row class="factoryClass">
                     <el-col class="mayel-radio-group factoryMoneyAssetTurnover" :xs="24" :sm="12" :md="12" :lg="12" style="text-align: left;">
                          <el-table
                                :data="factoryMoneyAssetTurnoverArr"
                                border
                                height="430"
                                style="width: 100%;text-align:center">
                                <el-table-column
                                      prop="text"
                                      label="公司名称"
                                      label-class-name="blueHeader"
                                      width="180">
                                    </el-table-column>
                                    <el-table-column
                                      prop="val"
                                      label="资金额占比"
                                      label-class-name="blueHeader">
                                    </el-table-column>
                                    <el-table-column
                                      prop="value"
                                      label-class-name="blueHeader"
                                      label="周转频次">
                                    </el-table-column>
								          </el-table>
                     </el-col>
                     <el-col class="mayel-radio-group" :xs="24" :sm="12" :md="12" :lg="12" style="text-align: left;">
                          <div class="tableCon">
                            <chart  ref="moneyValueChart" :option="moneyValueChartOption" />
                          </div>
                     </el-col>
            </el-row>
           </el-tab-pane>
<!-- 应收账款  -->
          <el-tab-pane label="应收账款" >
            <el-row style="margin-top: 2em;margin:0 2rem"  :gutter="20">
              <el-col :xs="24" :sm="12" :md="12" :lg="12" style="text-align: left;padding:20px">
                <div id="factoryHaveMoneyChart" style="height:600px"  ref="factoryHaveMoneyChart" />
              </el-col>
               <el-col :xs="24" :sm="10" :md="10" :lg="10" style="text-align: left;padding:30px">
                  <div class="haveMoneyTop" :style="'background:'+factoryHaveMoneyColorArr[factoryHanveMoneyCount]">
                    <div>
                        <div class="itemHanveMoneyTop" style="font-size:1.5rem">{{factoryHaveMoneyArr[factoryHanveMoneyCount].departName}}</div>
                        <div class="itemHanveMoneyTop" style="font-size:1.2rem">应收账户金额（万元）</div>
                    </div>
                    <div style="width:50%;text-align:center;height:100%">
                   <div class="itemHanveMoneyTop" style="font-size: 2.5rem;padding: 28px 0 0 13px;">¥{{factoryHaveMoneyArr[factoryHanveMoneyCount].realPrice}}</div>

                    </div>
                   
                  </div>
                  <div class="haveMoneyBottom factoryMoneyAssetTurnover">
                      <el-table
                                :data="factoryHaveMoneyArr[factoryHanveMoneyCount].detailList"
                                border
                                height="430"
                                style="width: 100%;text-align:center">
                                <el-table-column
                                      prop="createName"
                                      label="客户经理"
                                      label-class-name="blueHeader">
                                    </el-table-column>
                                    <el-table-column
                                      prop="customName"
                                      label="客户"
                                      label-class-name="blueHeader">
                                    </el-table-column>
                                    <el-table-column
                                      prop="realPrice"
                                      label-class-name="blueHeader"
                                      label="应还账款">
                                    </el-table-column>
                                    <el-table-column
                                      prop="agingDay"
                                      label-class-name="blueHeader"
                                      label="账龄">
                                    </el-table-column>
								          </el-table>
                  </div>
              </el-col>
            </el-row>
            <!--应还账款明细   本月已还 -->
            <el-row style="margin-top: 2em;padding: 2em;background:#262544;"  :gutter="20">
              <span style="color:white">应还账款明细（共9笔，共计 {{shouldGetMoney}} 万元）</span> 
              <div  class="factoryMoneyAssetTurnover">
                  <el-table 
                        :data="factoryHaveMoneyDetailList"
                        :span-method="objectSpanMethod"
                        border
                        style="width: 100%; margin-top: 20px">
                        <el-table-column
                          prop="departName"
                          label="分公司"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="createName"
                          label="客户经理">
                        </el-table-column>
                        <el-table-column
                          prop="customName"
                          label="客户">
                        </el-table-column>
                        <el-table-column
                          prop="realPrice"
                          label="应还账款(万)">
                        </el-table-column>
                        <el-table-column
                          prop="agingDay"
                          label="欠款时长(天)">
                        </el-table-column>
                         <el-table-column
                          prop="sumVal"
                          label="合计账款(万)">
                        </el-table-column>
                      </el-table>
              </div>
            </el-row>

          </el-tab-pane>
          <!-- 库存差价 -->
          <el-tab-pane label="库存差价" >
            <el-row style="margin-top: 2em;margin:0 2rem"  :gutter="20">
                <el-col class="mayel-radio-group" :xs="24" :sm="8" :md="8" :lg="8" style="text-align: left;color:white">
                   <h2 style="color:#F6AD51">
                      今日库存总量：
                   </h2>
                  <div class="flexRow"> 
                      <div  class="flexItem" v-for="(item,id) in todaySumStockVal" :key="id">
                        <h1>
                          {{item}}
                        </h1>
                      </div>
                      <h1 style="color:#F6AD51">
                      吨
                      </h1>
                  </div>
                  <p style="color:#F6AD51">
                    昨日出库量：{{shipmentsOfYesterday}} &nbsp;&nbsp;&nbsp; 吨毛利：{{spreadPerTon}}
                  </p>
                  <p>今日定价未售库存排行</p>
                   <div class="haveMoneyBottom factoryMoneyAssetTurnover ">
                                <el-table 
                                      :data="steelNumRank"
                                      border
                                      style="width: 100%;">
                                      <el-table-column
                                            prop="id"
                                            label="排名"
                                            label-class-name="text-center"
                                            class-name="text-center">
                                          </el-table-column>
                                          <el-table-column
                                            prop="supplierName"
                                            label="厂家"
                                            label-class-name="text-center"
                                            class-name="text-center">
                                          </el-table-column>
                                          <el-table-column
                                            prop="unsoldQuantity"
                                            label-class-name="text-center"
                                            class-name="text-center"
                                            label="库存量">
                                          </el-table-column>
                                </el-table>
                  </div>
                </el-col>
                <el-col class="mayel-radio-group" :xs="24" :sm="16" :md="16" :lg="16" style="text-align: left;">
                   <div id="stockPriceChart"  style="height:600px;width:100%"   ref="stockPriceChart" />
                </el-col>
            </el-row>
        <!-- 酒钢库存分布 -->
        <el-row class="bigTitleCon"style="background: #262544;padding:3em 1em;">
								<el-col :xs="24" :sm="17" :md="17" :lg="17" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">时间：</b>
									<el-radio-group @change="changeSteelStockTime" text-color="white"  v-model="steelTimeDefault">
                      <el-radio-button label="3001">今天</el-radio-button>
                      <el-radio-button label="3002">最近七天</el-radio-button>
                      <el-radio-button label="3003">近三十天</el-radio-button>
                </el-radio-group>
                <el-date-picker  @change="changeSteelDatePicker"
                                      type="daterange"
                                      align="right"
                                      unlink-panels
                                      start-placeholder="开始日期"
                                      end-placeholder="结束日期"
                                      style="padding-left:10px"  
                                      v-model="changeSteelDateModal"
                                       :picker-options="contrastDateOption" >
              		</el-date-picker>
             		</el-col>
								<el-col :xs="24" :sm="7" :md="7" :lg="7" style="text-align: right;padding-right: 1em;">
									<el-radio-group @change = "steelTimeChange" text-color="white" v-model="steelTimeAccuracyDefault">
                      <el-radio-button label="4001">按天</el-radio-button>
                      <el-radio-button label="4002">按周</el-radio-button>
                      <el-radio-button label="4003">按月</el-radio-button>
                </el-radio-group>
								</el-col>
					</el-row>
           
            <el-row class="factoryClass" >  
            	<el-row class="bigTitleCon"style="">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">厂家：</b>
                    <el-radio-group @change="onSteelChange" text-color="white"  v-model="steelDefaultItem">
                      <el-radio-button :label="steelItem.id" v-for="(steelItem,id) in steelList" :key="steelItem.id">{{steelItem.name}}</el-radio-button>
                    </el-radio-group>
             		</el-col>
						</el-row>
						<el-row class="bigTitleCon" style="">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">{{steelStockItem.name}}库存分布：</b>
									<el-select @change="onSteelStockItem" v-model="steelStockItem.id" >
                              <el-option
                                v-for="item in steelStockArr"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                              </el-option>
                      </el-select>
                        <el-radio-group  @change="changeType" v-if="showFiltBool" style="float:right" text-color="white" fill="#339966" v-model="filterType">
                          <el-radio-button label="按销量"></el-radio-button>
                          <el-radio-button label="按采购量"></el-radio-button>
                          <el-radio-button label="按毛利润"></el-radio-button>
                        </el-radio-group>
             		</el-col>
						</el-row>
						<el-row>
                 <el-col class="mayel-radio-group" :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
                        <div class="rowCon">
                          <div class="rowItem" style="width:100%" :xs="24" :sm="6" :md="6" :lg="6" v-for="(saleItem,index) in todayKfValue" :key="index" >
                            <p>{{saleItem.text}}</p>
                            <p style="font-size:2rem;color:#FDB151">{{saleItem.val+saleItem.unit}}</p>
                          </div>
                        </div>
                  </el-col>
            </el-row>
            <el-row>
                  <el-col  class="mayel-radio-group" :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
                      <div class="tableCon" style="500px">
                          <chart  :chartStyle="'height:200px'"  ref="kcChart" :option="kcChartOption" />
                      </div>
                  </el-col>
            </el-row>
          </el-row>
<!-- 酒钢库存分布 -->
            <el-row style="height:1em;;background:#262544;"></el-row>
            <el-row class="factoryClass" >
							<el-row class="bigTitleCon"style="">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">钢材类型：</b>
                    <el-radio-group @change="changeTime" text-color="white"  v-model="factoryDefault">
                          <el-radio-button v-for="(item,index) in factoryAllArr" :key="index" :label="index">{{item}} </el-radio-button>
                    </el-radio-group>
             		</el-col>
						</el-row>
                   <el-row class="bigTitleCon" style=" padding-bottom: 1em;color:white;padding:20px">
                    <el-col class="mayel-radio-group" :xs="24" :sm="12" :md="12" :lg="12">
                        <chart  ref="steelTypeChart" :option="steelTypeChartOption" />
                    </el-col>
                      <el-col class="mayel-radio-group factoryMoneyAssetTurnover " :xs="24" :sm="12" :md="12" :lg="12">
                                <el-table 
                                      :data="steelTypeArr"
                                      border
                                      style="width: 100%;">
                                      <el-table-column
                                            prop="type"
                                            label="类型"
                                            label-class-name="text-center"
                                            class-name="text-center"
                                            width="180">
                                          </el-table-column>
                                          <el-table-column
                                            prop="val"
                                            label="库存"
                                            label-class-name="text-center"
                                            class-name="text-center">
                                          </el-table-column>
                                          <el-table-column
                                            prop="count"
                                            label-class-name="text-center"
                                            class-name="text-center"
                                            label="占比">
                                          </el-table-column>
                                          <el-table-column
                                            prop="money"
                                            label-class-name="text-center"
                                            class-name="text-center"
                                            label="金额">
                                          </el-table-column>
                                </el-table>
                      </el-col>
              </el-row>
            </el-row>

          </el-tab-pane>
          <!-- 库存差价 end -->
            <!-- 钢圈 -->
           <el-tab-pane label="钢圈" >
            <el-row style="background:#262544;">
                        <gang-quan ref="gangQuan"></gang-quan>

            </el-row>
          </el-tab-pane>
          <!-- 钢圈 end -->
        </el-tabs>
      </el-row>
    </div>
  </div>

</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
import chart from "../../../../components/Charts/chart";
import gangQuan from "./gangQuan";
export default {
  data() {
    return {
      storeHouseNameArr:[],//库房名
      factoryStoreNameArr:[],//钢厂名
      factoryStoreAllName:[],//仓库加钢厂名字
      seelTypeDefault:'0',//默认钢材类型
      checkList: [],
      steelTypeArr:[],
      kcChartOption:{},
      factoryHaveMoneyArr:[
        {
          secFactory:'郑州分公司',
          value:'10000',
          dataList:[
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"2天"
              }
          ]
        },
        {
          secFactory:'武汉分公司',
          value:'10000',
          dataList:[
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"190天"
              }
          ]
        },
        {
          secFactory:'洛阳分公司',
          value:'10000',
          dataList:[
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"20天"
              }
          ]
        },
        {
          secFactory:'合肥分公司',
          value:'10000',
          dataList:[
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"30天"
              }
          ]
        },
        {
          secFactory:'西南分公司',
          value:'10000',
          dataList:[
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"6天"
              }
          ]
        },
        {
          secFactory:'广州分公司',
          value:'10000',
          dataList:[
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"211天"
              },
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"211天"
              },
          ]
        },
        {
          secFactory:'西安分公司',
          value:'10000',
          dataList:[
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"212天"
              }
          ]
        },
        {
          secFactory:'无锡分公司',
          value:'10000',
          dataList:[
              {
                name:'业务经理',
                kh:'郑州中粮',
                val:'1522',
                time:"21天"
              }
          ]
        },
      ],
      factoryHaveMoneyColorArr:['#7553dc','#5282e6','#abdb9d','#3eb37f','#feca64','#ff8548','#fe6468','#e371b7'],
      factoryHanveMoneyCount:0,
      factoryHaveMoneyChartRote : null,
      factoryMoneyAssetTurnoverArr:[
        {text:'郑州分公司',val:'35%',value:'2'},
        {text:'洛阳分公司',val:'35%',value:'3'},
        {text:'西安分公司',val:'35%',value:'4'},
        {text:'上海分公司',val:'35%',value:'5'},
        {text:'广州分公司',val:'35%',value:'1'},
        {text:'西南分公司',val:'35%',value:'2'},
      ],
      todayAllSale:[
        {
          text:'今日总销量',
          val:'14000',
          unit:'吨',
           line: "up"
        },
        {
          text:'盘螺',
          val:'4000',
           line: "up",
          unit:'吨'
        },
        {
          text:'线材',
          val:'5000',
          unit:'吨',
          line: "up",
        },
        {
          text:'螺纹',
          val:'14000',
          line: "up",
          unit:'吨'
        },
        {
          text:'钢坯',
          val:'3000',
          line: "down",
          unit:'吨'
        },
      ],
      todayKfValue:[
        {
          text:'酒钢库存量',
          val:'14000',
          unit:'吨',
           line: "up"
        },
        {
          text:'库存利润',
          val:'17.28',
           line: "up",
          unit:'万元'
        },
        {
          text:'吨毛利',
          val:'12.16',
          unit:'元/吨',
          line: "up",
        },
        {
          text:'今日差价',
          val:'-145',
          line: "up",
          unit:'元'
        },
      ],
      steelTypeChartOption:{},//钢材类型
      factoryStorckDistributeChartOption:{},//厂家库存分布
      factoryOther:false,
      factoryDefault:'0',//厂家名字
      factoryAllArr:[
        '全部','盘螺','螺纹钢','线材','钢坯'
        ],
      factoryStockTimeDimensionality:'0',//时间维度
      factoryStockDay:'0',
      mapChart:null,
      checked:false,
      isShow: false,
      contrastDate: [],
      contrastDateOption: "",
      contrast: false,
      daysSel: "4001",
      placeholder1: "销量",
      showFiltBool: false,
      filterType: "按销量",
      tableData: [
        {
          name: "线材",
          data1: "1000",
          data2: "2000"
        },
        {
          name: "螺纹",
          data1: "33333",
          data2: "10000"
        },
        {
          name: "钢坯",
          data1: "20000",
          data2: "6000"
        },
      ],
      tableData6: [
        {
          id: "洛阳",
          name: "王小虎",
          amount1: "洛阳某某公司",
          amount2: "100万",
          amount3: "8"
        },
        {
          id: "西安",
          name: "王小虎",
          amount1: "陕西某某公司",
          amount2: "100万",
          amount3: 12
        },
        {
          id: "西南",
          name: "韩再萍",
          amount1: "苏州某某公司",
          amount2: "100万",
          amount3: 9
        },
        {
          id: "广州",
          name: "李五一",
          amount1: "广州某某公司",
          amount2: "100万",
          amount3: 17
        },
        {
          id: "郑州",
          name: "任小川",
          amount1: "偃师某某公司",
          amount2: "100万",
          amount3: 15
        }
      ],
      saleMoneyArr: [
      ],
      moneyValueChartOption: {},
      moneySetValue: [
        {
          name: "郑州分公司",
          id: "1",
          color:'#FE6668',
          value: "123456",
          line:'up'
        },
        {
          name: "西南分公司",
          id: "2",
          color:'#FEAA40',
          value: "123456",
          line:'up'
        },
        {
          name: "洛阳分公司",
          id: "3",
           color:'#0386d1',
          value: "123456",
          line:'up'
        },
        {
          name: "广州分公司",
          id: "4",
          color:'#403F61',
          value: "123456"
        },
        {
          name: "西安分公司",
          id: "5",
          color:'#403F61',
          value: "123456"
        },
        {
          name: "无锡分公司",
          id: "6",
          color:'#403F61',
          value: "123456"
        }
      ],
      steelNumRank:[],
      pickerOptions2: "",
      factoryChartOption: {},
      saleMontTableArr: [
        {
          name: "赵xx",
          department: "浩德视频",
          ID: "8",
          value: 44,
          index: "1"
        },
        {
          name: "王xx",
          department: "物联",
          ID: "88",
          value: 33,
          index: "2"
        },
        {
          name: "孙xx",
          department: "产业园",
          ID: "888",
          value: 22,
          index: "3"
        },
        {
          name: "李xx",
          department: "物联",
          ID: "8888",
          value: 11,
          index: "4"
        },
        {
          name: "周xx",
          department: "金控",
          ID: "8888",
          value: 1,
          index: "5"
        }
      ],
      tableData3: [
        {
          name: "赵xx",
          department: "钢厂1",
          ID: "8",
          value: 44,
          index: "1"
        },
        {
          name: "王xx",
          department: "钢厂4",
          ID: "88",
          value: 33,
          index: "2"
        },
        {
          name: "孙xx",
          department: "钢厂3",
          ID: "888",
          value: 22,
          index: "3"
        },
        {
          name: "李xx",
          department: "钢厂2",
          ID: "8888",
          value: 11,
          index: "4"
        },
        {
          name: "周xx",
          department: "钢厂4",
          ID: "8888",
          value: 1,
          index: "5"
        }
      ],
      steelNewDate:new Date,
      steelTime:"3001",
      nowTimeSel: "",
      defultType: "0",
      itemFactory: [],
      factoryTargetArr:[
        {value:"6001",label:"销量"},
        {value:"6003",label:"毛利量"},
        {value:"6005",label:"锁货量"},
      ],
      targetArr:[
        {value:"6001",label:"销量",unit:'吨'},
        {value:"6002 ",label:"预售量",unit:'吨'},
        {value:"6004",label:"采购量",unit:'吨'},
        {value:"6005",label:"锁货量",unit:'吨'},
      ],
      factoryArr: [
        {
          text: "钢厂",
          itemArr: [
            {
              label: "钢厂一",
              value: "0"
            },
            {
              label: "钢厂二",
              value: "1"
            },
            {
              label: "钢厂三",
              value: "2"
            },
            {
              label: "钢厂四",
              value: "3"
            },
            {
              label: "钢厂五",
              value: "4"
            }
          ]
        },
        {
          text: "仓库",
          itemArr: [
            {
              label: "仓库一",
              value: "5"
            },
            {
              label: "仓库二",
              value: "6"
            },
            {
              label: "仓库三",
              value: "7"
            },
            {
              label: "仓库四",
              value: "8"
            },
            {
              label: "仓库五",
              value: "9"
            }
          ]
        }
      ],
      defaultDataSourceType: "0",
      dataSourceType: [
        {
          label: "内部系统",
          value: "0"
        },
        {
          label: "钢圈",
          value: "1"
        }
      ],
      timerRadioArr: ["当天", "本月", "本季度", "本年度"],
      saleOptionDataArr: [],
      topTargetData: [
        {
          title: "销量指标（吨）",
          value: 2222,
          top: true,
          img: "saleNum",
          color: "#0386d1",
          itemArr: [
            {
              text: "今日总销量",
              value: "14000",
              line: "up"
            },
            {
              text: "今日预销量",
              value: "13000",
              line: "up"
            },
            {
              text: "累计销售量",
              value: "30000",
              line: "down"
            }
          ]
        },
        {
          title: "利润指标（万元）",
          value: 33333,
          top: false,
          img: "money",
          color: "#FEAA40",
          itemArr: [
            {
              text: "今日总毛利",
              value: "14000",
              line: "down"
            },
            {
              text: "返利金额",
              value: "13000",
              line: "up"
            },
            {
              text: "累计毛利润",
              value: "13000",
              line: "up"
            }
          ]
        },
        {
          title: "采购指标（吨）",
          value: 245543,
          top: false,
          color: "#F86F39",
          img: "shop",
          itemArr: [
            {
              text: "今日采购量",
              value: "1400",
              line: "down"
            },
            {
              text: "今日锁货量",
              value: "1300",
              line: "up"
            },
            {
              text: "累计采购量",
              value: "1300  ",
              line: "up"
            }
          ]
        }
      ],
      kfArr:[{
          value: '0',
          label: '酒钢库'
        }, {
          value: '1',
          label: '郑州库'
        }, {
          value: '2',
          label: '武汉库'
        }, {
          value: '3',
          label: '西安库'
        }, {
          value: '4',
          label: '上海库'
        }],
      kfArrItem:'6001',
      getMoneyPropoOption: {}, //应收款占比
      initDataArr: [],
      activeName: "0",
      topDate: "",
      factoryHaveMoneyOption: {},
      seelTypeParams: { 
            timeType:'3001',//今天
            queryType:'6001',
            timeAccuracy:'4001',
            steelType:''},
      modalCheck:false,
      allFactoryName:[],
      factoryItemId:'0',
      saleDetailParams:{   //经营排名数据params
        timeType:'3001',//今天
        queryType:'6001',
        startTime:'',
        endTime:'',
        branchOfficeIds:'',
        activeRankName:'0',
      },
      stateBussinessDefault:'3001',
      stateBussinessTargetDefault:'6001',
      todaySumStockVal:0,// 今日库存总量
      shipmentsOfYesterday:0,//昨日
      spreadPerTon:0,//吨毛利
      steelList:[],//厂家名
      steelStockItem:{
        id:'',
        name:''
      },
      steelStockArr:[],//厂家库存分布
      steelStockParams:{ //厂家id 默认
        supplierId:'04b6a0aa-96c6-4efe-862e-646ca361de4c'
      },
      steelStockPriceParams:{
        timeType:'3001',//今天
        queryType:'8001',
        startTime:'',
        endTime:'',
        timeAccuracy:'4001',//时间精度
        supplierId:'',//厂家id
        providerId:'',//仓库id 
      },
      steelDefaultItem:'', //厂家id 
      steelDefaultItemName:'',//厂家名字
      steelDetail:[],
      steelTimeDefault:'3001',
      changeSteelDateModal:[],
      steelTimeAccuracyDefault:'4001',
      factoryHaveMoneyDetailList:[],
      shouldGetMoney:'',//总应收账款
      lastFactoryName:'',
      lastFactoryNameCount:0,
      factoryRowSpan:[]
    };
  },
  components: {
    chart,
    gangQuan,
  },
  watch: {},
  methods: {
    //获取钢材类型
    getSteelType(){
            var self = this
            var url = this.$api.MVKJGetStockSteelTypeDetailList 
            var params = {
              steelType :''
            }
            this.$fetch({
                url: url,
                method: 'post',
                data: self.$qs.stringify(params)
              }).then(resData => {
                var self = this
                var data = resData.data.result
                var steelTypeArr = []
                data.list.forEach(item=>{
                  var obj = {}
                  obj.type = item.steelTypeName
                  obj.val = item.stock +'吨'
                  obj.count = item.InventoryRatio+'%'
                  obj.money = item.stockAmount+'元'
                  steelTypeArr.push(obj)
                })
                this.$set(this,"steelTypeArr",steelTypeArr)
                this.steelTypeChart(data)
              }).catch(err => {
                console.log(err)
              });
    },
    //厂家选择精度
    steelTimeChange(res){
        this.steelStockPriceParams.timeAccuracy = res
        this.getSteelList()
    },
    //厂家选择时间范围
    changeSteelDatePicker(res){
          var endTime = this.$utils.formatTime(res[1])
          var startTime = this.$utils.formatTime(res[0])
          this.steelStockPriceParams.startTime = startTime
          this.steelStockPriceParams.endTime = endTime
          this.steelStockPriceParams.timeType = '3004'
          this.getSteelList()
    },
     //厂家库存选择时间
    changeSteelStockTime(res){
        this.steelStockPriceParams.timeType = res
          //前七天
          var myDate = new Date(); //获取今天日期
          var lastDate = new Date(); 
          if(res === '3001'){
            this.$set(this,"changeSteelDateModal",[ ])
          }else if(res === '3003'){
          }else if(res === '3002'){
              lastDate.setDate(myDate.getDate() - 7);
              var arr = [lastDate,myDate]
              this.$set(this,"changeSteelDateModal",arr)
          }else if(res === '3003'){
            //前30天
            lastDate.setDate(myDate.getDate() - 30);
              var arr = [lastDate,myDate]
              this.$set(this,"changeSteelDateModal",arr)
          }

        this.getSteelList()
    },
    //获取厂家库存、均价详情
    getSteelPriceArr(id){
          var params = {
            supplierId : id 
          }
          var self = this
            var url = this.$api.MVKJGetStockDetailsList 
            this.$fetch({
                url: url,
                method: 'post',
                data: self.$qs.stringify(params)
              }).then(resData => {
                var self = this
                var data = resData.data.result.stockDetailList[0]
                var steelDetail = [ data.inventoryQuantity, data.spreadPerTon,data.grossProfitAmount,data.spread]  //厂家详细情况
                var todayKfValue = self.todayKfValue
                todayKfValue.forEach((item,id)=>{
                  item.val = steelDetail[id]
                })
                self.$set(self,"todayKfValue",todayKfValue)
                self.$set(self,"steelDetail",steelDetail)
              }).catch(err => {
                console.log(err)
              });
    },
        //厂家切换
        onSteelChange(res){
            this.steelStockPriceParams.supplierId = res 
            this.steelList.forEach(item=>{
              if(item.id === res){
                this.todayKfValue[0].text = item.name+'库存量'
              }
            })
            this.getSteelStockList(res)
            this.getSteelPriceArr(res)
        },
        //库存均价 图表
      spreadDetailList(){
          var self = this
          var url = this.$api.MVKJSpreadDetailList 
          var offerData = [] //报价data
          var averagePrice =[] //均价data
          self.steelStockPriceParams.queryType = '8001'
          self.$fetch({
                  url: url,
                  method: 'post',
                  data: this.$qs.stringify(self.steelStockPriceParams)
                }).then(resData => {
                  var averagePrice = resData.data.result
                   self.steelStockPriceParams.queryType = '8002'
                    self.$fetch({
                          url: url,
                          method: 'post',
                          data: self.$qs.stringify(self.steelStockPriceParams)
                        }).then(resData => {
                          var offerData = resData.data.result 
                           self.kcChart(averagePrice,offerData)
                        }).catch(err => {
                          console.log(err)
                        });
                
                }).catch(err => {
                  console.log(err)
                });
      },
      //切换库存
    onSteelStockItem(res){
        var self = this
        this.steelStockArr.forEach(item=>{
          if(res === item.id){
            self.steelStockItem.id = item.id
            self.steelStockItem.name = item.name
          }
        })
        this.steelStockPriceParams.providerId = res
        this.spreadDetailList()
    },
    //获取厂家对应仓库
    getSteelStockList(id){
      var params = {
        supplierId:id
      }
      var self = this
      var url = this.$api.MVKJGetProviderList 
      this.$fetch({
              url: url,
              method: 'post',
              data: this.$qs.stringify(params)
            }).then(resData => {
              var data = resData.data.result 
              var firstId = data[0].id
              var firstName = data[0].name
              this.steelStockItem.id = firstId
              this.steelStockItem.name = firstName
              this.steelStockPriceParams.providerId = firstId //仓库id
              this.$set(this,"steelStockArr",data)
              this.spreadDetailList()
            }).catch(err => {
              console.log(err)
            });
    },
    //获取厂家名称
    getSteelList(){
             var self = this
             var url = this.$api.MVKJGetSupplierList 
              this.$fetch({
                      url: url,
                      method: 'post',
                    }).then(resData => {
                      var data = resData.data.result 
                      this.$set(this,"steelList",data)
                      var firstSteelId = data[0].id
                      this.steelStockPriceParams.supplierId = firstSteelId //厂家id
                      this.todayKfValue[0].text = data[0].name+'库存量'  //默认厂家名字
                      this.steelDefaultItem = firstSteelId
                      this.getSteelPriceArr(firstSteelId)
                      this.getSteelStockList(firstSteelId)
                    }).catch(err => {
                      console.log(err)
                    });
    },
    //各厂家库存详情
    getStockDetailsList(){
        var self = this
             var url = this.$api.MVKJGetStockDetailsList 
            this.$fetch({
                    url: url,
                    method: 'post',
                  }).then(resData => {
                    var data = resData.data.result 
                    var todaySumStockVal = String(data.inventoryQuantity)
                    var shipmentsOfYesterday = data.shipmentsOfYesterday
                    var spreadPerTon = data.spreadPerTon //吨毛利
                    var stockDetailList = data.stockDetailList.slice(0,10)
                    this.$set(this,"todaySumStockVal",todaySumStockVal)
                    this.$set(this,"shipmentsOfYesterday",shipmentsOfYesterday)
                    this.$set(this,"spreadPerTon",spreadPerTon)
                    this.$set(this,"steelNumRank",stockDetailList)
                  }).catch(err => {
                    console.log(err)
                  });
    },
    //获取分公司应收账款
    getBranchOfficeAccountsReceivableList(){
            var self = this
             var url = this.$api.MVKJGetBranchOfficeAccountsReceivableList 
            this.$fetch({
                    url: url,
                    method: 'post',
                  }).then(resData => {
                    var data = resData.data.result 
                    this.factoryHaveMoneyArr = data
                    var factoryHaveMoneyDetailList= []
                    var inGetVal = 0
                    var arr = []
                    data.forEach((item,id)=>{
                        item.detailList.forEach(aa=>{
                           inGetVal += inGetVal + aa.realPrice
                        })
                        arr.push(item.detailList.length)
                        factoryHaveMoneyDetailList =   factoryHaveMoneyDetailList.concat(item.detailList) 
                    })
                    this.factoryRowSpan = arr 
                    factoryHaveMoneyDetailList[0].sumVal = inGetVal
                    this.factoryHaveMoneyDetailList = factoryHaveMoneyDetailList
                    this.factoryHaveMoneyChart(data)
                  }).catch(err => {
                    console.log(err)
                  });
    },
    changeStateBusinessTarget(res){
      this.saleDetailParams.queryType = res 
      this.getPurchaseSaleDetailListForBranchOffice()
    },
    changeStateOfBusinessTime(res){
      this.saleDetailParams.timeType = res
      this.getPurchaseSaleDetailListForBranchOffice()
    },
    setRankHandleClick(res){
      var self = this
        if(res.index === '0'){
          self.$set(self.saleDetailParams,"queryType",'6001')
        }else if(res.index === '1'){
          self.$set(self.saleDetailParams,"queryType",'6003')
        }else if(res.index === '2'){
          self.$set(self.saleDetailParams,"queryType",'6005')
        }
        self.getPurchaseSaleDetailListForBranchOffice()

    },
    //各分公司经营排名数据详情
    getPurchaseSaleDetailListForBranchOffice(){
        this.$set(this,'moneySetValue',[])
           var self = this
           var url = this.$api.MVKJGetPurchaseSaleDetailListForBranchOffice 
            this.$fetch({
                    url: url,
                    method: 'post',
                    data: this.$qs.stringify(self.saleDetailParams)
                  }).then(resData => {
                      var data = resData.data.result 
                      var dataArr = []
                      data.forEach((item,id)=>{
                        var obj = item
                        obj.color = '#403F61'
                        // if(id <3){
                        //   obj.color = self.moneySetValue[id].color
                        // }else{
                        //   obj.color  = '#403F61'
                        // }
                        dataArr.push(obj)
                      })
                      self.moneySetValue = []
                      self.$set(self,"moneySetValue",dataArr)
                      setTimeout(() => {
                         self.factoryChart(data)
                      }, 10);
                     
                  }).catch(err => {
                    console.log(err)
                  });
    },
      changeFactoryItmem(res){
        if(res === '0'){
           this.saleDetailParams.branchOfficeIds = ''
        }else{
          this.saleDetailParams.branchOfficeIds = res
        }
        this.getPurchaseSaleDetailListForBranchOffice()
      },
    getBranchOfficeList(){
        var self = this
          var url = this.$api.MVKJGetBranchOfficeList 
          this.$fetch({
                  url: url,
                  method: 'post',
                }).then(resData => {
                  var arr = [{
                    id:'0',
                    name:'全部'
                  }]
                 arr =  arr.concat(resData.data.result)
                  this.$set(this,"allFactoryName",arr)
                }).catch(err => {
                  console.log(err)
                });
    },
    exChangeStoreOut(){
       this.$set(this,"modalCheck",false)
       this.$set(this,"checked",false)
       this.$set(this,"checkList",[])
       this.seelTypeParams = { 
            timeType:'3001',//今天
            queryType:'6001',
            timeAccuracy:'4001',
            steelType:''},
       this.getPurchasingSalesDetailList()
    },
    factoryExchange(){
      var modalCheck = this.checked
      var self = this
      if(this.checked === false){
        self.seelTypeParams = { 
            timeType:'3001',//今天
            queryType:'6001',
            timeAccuracy:'4001',
            steelType:''}
            this.getPurchasingSalesDetailList()
      }
      this.$set(this,"modalCheck",modalCheck)
    },
    //开启对比仓库
    exchangeStore(){
        if(this.checkList.length < 1){
            this.$message({
              message: '至少选择一个',
              type: 'warning'
            });
            return
            }
            this.seelTypeParams.isOpenProvider = true
            var provideIds = ''
            var self = this
            this.factoryStoreAllName.forEach(item=>{
               self.checkList.forEach(aa=>{ 
                 if(aa === item.name){
                   provideIds  += item.providerId + ','
                 }
               })
            })
            this.$set(this,"modalCheck",false)
            this.seelTypeParams.providerIds = provideIds
            this.getPurchasingSalesDetailList()
            

    },
  //改变时间精度
    daysChange(res){
      this.seelTypeParams.timeAccuracy = res
      this.getPurchasingSalesDetailList()
    },
    //更改钢铁类型
    changeSeetType(res){
      if(res === 0){
       this.seelTypeParams.steelType = ''
      }else{
        this.seelTypeParams.steelType = res
      }
      this.getPurchasingSalesDetailList()
    },
    onTargetArrItem(res){
      this.seelTypeParams.queryType = res
     this.getPurchasingSalesDetailList()
    },
    // 采购销售钢材类型，图表
    getPurchasingSalesDetailList(){
         var url = this.$api.MVKJGetPurchasingSalesDetailList 
          var self = this
            this.$fetch({
              url: url,
              method: 'post',
              data: this.$qs.stringify(self.seelTypeParams)
            }).then(resData => {
                  var data = resData.data.result
                  var firstId = self.seelTypeParams.queryType
              if(self.seelTypeParams.queryType === '6001'){
                self.getGross(self.seelTypeParams,data)
              }else{
                 self.setSaleOptionDataArr(data,firstId);
              }
            }).catch(err => {
              console.log(err)
            });
    },
    getGross(params,saleData){
          var self = this
          var url = this.$api.MVKJGetPurchasingSalesDetailList 
          var firstId = params.queryType+'6003'
          params.queryType = '6003'
          this.$fetch({
                  url: url,
                  method: 'post',
                  data: this.$qs.stringify(params)
                }).then(resData => {
                  var data = resData.data.result
                  var dataArr = [saleData,data]

                  self.setSaleOptionDataArr(dataArr,firstId);
                
                }).catch(err => {
                  console.log(err)
                });
      },
    //4.获取各类型钢材时间段内汇总信息
    getClassifiedInfo(params){
          var url = this.$api.MVKJGetClassifiedInfo 
          params = params ? params : {
            timeType:'3001',//今天
            // startTime:'2017-09-01',
            // endTime:'2017-10-01'
          }
            this.$fetch({
              url: url,
              method: 'post',
              data: this.$qs.stringify(params)
            }).then(resData => {
              var data = resData.data.result
              //总销量
              if(data.length === 0){
                this.todayAllSale.forEach(item=>{
                  item.val = 0
                })
              }else{
                var sumVal = 0
                data.forEach(item=>{
                  sumVal += item.value
                })
                this.todayAllSale[0].val = sumVal
                this.todayAllSale[1].val = data[0].value
                this.todayAllSale[2].val = data[1].value
                this.todayAllSale[3].val = data[2].value

              }
              this.setHandleClick()
              
            }).catch(err => {
              console.log(err)
            });
    },
    //3.获取所有仓库钢厂列表
    getSupplierProviderList(){
         var url = this.$api.MVKJGetSupplierProviderList
          var params = {}
            this.$fetch({
              url: url,
              method: 'post',
              // data: this.$qs.stringify(params)
            }).then(resData => {
              var data = resData.data.result
              var factoryStoreNameArr = this.factoryStoreNameArr
              var manufacturerList = [] //钢厂
              var storeHouseNameArr =[] //库房
              data.manufacturerList .forEach((item,id) =>{
                var itemObj = {}
                itemObj.id = id 
                itemObj.name = item.name
                itemObj.providerId = item.id
                factoryStoreNameArr.push(itemObj)
              })
               data.warehouseList.forEach((item,id)=>{
                var obj = {}
                obj.id = id 
                obj.name = item.name 
                obj.providerId  = item.id
                storeHouseNameArr.push(obj)
              })
              this.$set(this,"factoryStoreNameArr",factoryStoreNameArr)
              this.$set(this,"storeHouseNameArr",storeHouseNameArr)
              var allArr = factoryStoreNameArr.concat(storeHouseNameArr)
                 
              this.$set(this,"factoryStoreAllName",allArr)
            }).catch(err => {
              console.log(err)
            });
        },
     //采购销售top 指标
    getTarget(){
      var url = this.$api.MVKJGetPurchasingSalesTotalInfo
      var params = {}
        this.$fetch({
          url: url,
          method: 'post',
          // data: this.$qs.stringify(params)
        }).then(resData => {
          var data = resData.data.result
          var topTargetData =  this.topTargetData
          topTargetData[0].itemArr[0].value = data.dayCount // 今日总销量
          topTargetData[0].itemArr[1].value = data.dayOldTotalCount // 今日预售量
          topTargetData[0].itemArr[2].value = data.totalCount // 累计销售量
          topTargetData[1].itemArr[0].value = data.dayProfit // 今日总毛利
          topTargetData[1].itemArr[1].value = data.rebateMoney // 返利金额
          topTargetData[1].itemArr[2].value = data.totalProfit //累计毛利润
          topTargetData[2].itemArr[0].value = data.dayPurchase // 今日采购量
          topTargetData[2].itemArr[1].value = data.dayLockGoodsCount // 今日锁货量
          topTargetData[2].itemArr[2].value = data.totalPurchase // 累计采购量
          this.$set(this,topTargetData,topTargetData)
          
        }).catch(err => {
          console.log(err)
        });
      
    },
    kcChart(averagePrice,offerData){
      var xData = []
      var yData = []
      var averagePriceData = []
      var offerDataArr = []
      var data2 = []
      averagePrice.forEach(item=>{
        xData.push(item.xData)
        averagePriceData.push(item.value)
      })
      offerData.forEach(item=>{
        offerDataArr.push(item.value)
      })
      var data1 = {
        data:averagePriceData,
        type:'line',
      }
      var data2 = {
        data:offerDataArr,
        type:'line'
      }
      yData.push(data1)
      yData.push(data2)
            var initData = {
              //需要给我传的数据
              xData: xData,
              yData: yData,
              legend: ["今日均价", "今日报价"],
              unit:'元/吨',
              textColor: "white",
              color:['#F86F39'],
              linearColor:[ //渐变颜色，
            {
              startColor:'rgba(83, 139, 234,1)',
              endColor:'rgba(83, 139, 234,0.2)'
            },{
              startColor:'rgba(248, 111, 57,1)',
              endColor:'rgba(248, 111, 57,0.2)'
            }
        ],//渐变色
              refName: "kcChart",
              returnOption: "kcChartOption",
              yAxisName: "今日均价(元/吨)",
              yAxis: {
                name: "今日报价(元/吨)",
                type: "value",
                nameLocation: "end",
                nameTextStyle: {
                  color: "white"
                },
                axisLabel: {
                  textStyle: {
                    color: "white"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "white"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "white"
                  }
                }
              },
              xAxisLine:{
                axisLabel: {
                  textStyle: {
                    color: "white"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine:{
                axisLabel: {
                  textStyle: {
                    color: "white"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              }
            };
            this.forEachFun(initData);
    },
    //钢材类型
    steelTypeChart(data){
      var initDataSource = []
      data.list.forEach(item=>{
        var obj = {}
            obj.name = item.steelTypeName
            obj.value = item.stock
            obj.type = 'pie'
            initDataSource.push(obj)
      })
        // var data = [
        //     { value: 335, name: "盘螺" ,type:'pie'},
        //     { value: 310, name: "钢坯" ,type:'pie'},
        //     { value: 234, name: "螺纹" ,type:'pie'},
        //     { value: 135, name: "线材" ,type:'pie'},
        //   ]
          var initData = {
            //需要给我传的数据
            yData: [initDataSource],
            color:['#0288d1','#F5435F','#F6AB52','#01f9d3',],
            pieName:'库存',
            legend: ["盘螺", "钢坯", "螺纹","线材"],
            refName: "steelTypeChart",
            returnOption: "steelTypeChartOption",
            textColor: "white",
            radius:['50%','80%'],
            center:'50%',
             legendObj:{
                    formatter: function() {
                          return  data.total+"吨" ;
                      },
                    show:true,
                    data:  [initDataSource[0].name],
                    left: 'center',
                    top: 'center',
                    icon: 'none',
                    align:'center',
                    textStyle: {
                        color: "#fff",
                        fontSize: 30,
                    },
                },
            label: {
              normal: {
                position: 'inner',
                formatter: '{b}\n{d}% \n{c}\r吨',
                fontSize:20
              }
            },
          };
          this.forEachFun(initData)
         
    },
    //厂家库存分布
    factoryStorckDistributeChart(){
       var xData = [
        "10-23周日",
        "10-24周一",
        "10-25周二",
        "10-26周三",
        "10-27周四",
        "10-28周五",
        "10-29周六"
      ];
      var data1 = {
        data: [30, 26, 28, 62, 28, 15, 10],
        type: "line"
      };
      var data2 = {
        data: [11, 22, 26, 33, 66, 88, 99],
        type: "line"
      };
      var data3 = {
        data: [12, 323, 44, 88, 66, 55, 33],
        type: "line"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1, data2, data3],
        color: ["red", "green", "blue"],
        legend: ["资金周转率", "资金周转率1", "资金周转率2"],
        refName: "factoryStorckDistributeChart",
        returnOption: "factoryStorckDistributeChartOption",
        textColor: "white",
        xLine:{
          lineColor:'#262544' //x 轴线颜色
        },
        stack: 'one', //堆叠图
      };
      this.forEachFun(initData);
    },
    //库存差价
    stockPriceChart(){
      var allData = {
          "citys":[
          {"name":"洛阳","value":[112.3995780944824,34.62155444],"symbolSize":4,"itemStyle":{"normal":{"color":"#FCA057"}}},
          {"name":"无锡","value":[119.16,34.59],"symbolSize":3,"itemStyle":{"normal":{"color":"#FCA057"}}},
          {"name":"西安","value":[108.5625,34.153971],"symbolSize":3,"itemStyle":{"normal":{"color":"#FCA057"}}},
          {"name":"无锡","value":[119.16,34.59],"symbolSize":2,"itemStyle":{"normal":{"color":"#FCA057"}}},
          ],
          "citys2":[
          {"name":"郑州","value":[113.663221,34.7568711],"symbolSize":3,"itemStyle":{"normal":{"color":"#F58158"}}},
          {"name":"上海","value":[121.48,31.22],"symbolSize":2,"itemStyle":{"normal":{"color":"#F5815"}}},
          {"name":"上海","value":[121.48,31.22],"symbolSize":2,"itemStyle":{"normal":{"color":"#F5815"}}},
          ],

          "moveLines":[
              {"fromName":"洛阳","toName":"郑州","coords":[[112.3995780944824,34.62155444],[113.663221,34.7568711]]},
              {"fromName":"无锡","toName":"上海","coords":[[119.16,34.59],[121.48,31.22]]},
              {"fromName":"西安","toName":"上海","coords":[[108.5625,34.153971],[121.48,31.22]]},
               {"fromName":"西安","toName":"上海","coords":[[108.5625,34.153971],[121.48,31.22]]},
                {"fromName":"西安","toName":"上海","coords":[[108.5625,34.153971],[121.48,31.22]]},
                 {"fromName":"西安","toName":"上海","coords":[[108.5625,34.153971],[120.48,31.22]]},
                  {"fromName":"西安","toName":"上海","coords":[[108.5625,34.153971],[121.48,30.22]]},
              {"fromName":"洛阳","toName":"郑州","coords":[[112.3995780944824,34.62155444],[110,34.7568711]]},
              {"fromName":"洛阳","toName":"郑州","coords":[[112.3995780944824,34.62155444],[100.663221,37.7568711]]},
              {"fromName":"洛阳","toName":"郑州","coords":[[112.3995780944824,34.62155444],[114.663221,22.7568711]]},
              {"fromName":"洛阳","toName":"郑州","coords":[[112.3995780944824,34.62155444],[114.663221,30.7568711]]},
              {"fromName":"洛阳","toName":"郑州","coords":[[112.3995780944824,35.62155444],[113.663221,21.7568711]]},   
              {"fromName":"洛阳","toName":"郑州","coords":[[112.3995780944824,34.62155444],[114.663221,30.7568711]]},
              ]
          };
         var mapOption = {
          backgroundColor: '#151531',
          title: {
              // text: '厂家库存',
              left: 'center',
              textStyle: {
                  color: '#fff'
              }
          },
          legend: {
              show: true,
              orient: 'vertical',
              top: 'bottom',
              left: 'right',
              data: ['地点', '线路','111'],
              textStyle: {
                  color: '#fff'
              }
          },
          geo: {
              map: 'china',
              // left: '10',
              right: '0%',
               zoom: 3,
              center: [117.98561551896913, 31.205000490896193],
              label: {
                  emphasis: {
                      show: false
                  }
              },
              roam: true,
              itemStyle: {
                  normal: {
                      areaColor: '#004881',
                      // borderColor: 'green'
                  },
                  emphasis: {
                      areaColor: '#252733'
                  }
              }
          },
           tooltip : {
              trigger: 'item'
          },
          series: [
            {
              name: '地点',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                  brushType: 'fill',
                  period:5,
                  scale:15
              },
              label: {
                normal: {
                    formatter: '{b}',
                    // position: 'right',
                    right:'20%',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },



              symbolSize: 3,
              showEffectOn: 'render',
              data: allData.citys
          },
          
          {
              name: '线路',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 2,
              large: true,
               effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 4
            },
            lineStyle: {
                normal: {
                    width: '',
                    color: '#a6c84c',
                    curveness: 0.2
                }
            },
              data: allData.moveLines
          }
          ]
       };
      	var self = this
        if(this.mapChart){
          this.mapChart.clear()
          this.mapChart.dispose()
      }
      var self = this
      setTimeout(() => {
        self.mapChart = echarts.init(document.getElementById('stockPriceChart'));
            self.mapChart.setOption(mapOption);
      }, 100);
      
    },
    //当选择完对比时间后
    onContrast(res) {
      var endTime = this.$utils.formatTime(res[1])
      var startTime = this.$utils.formatTime(res[0])
      var params = {
        timeType:'3004',
        startTime:startTime,
        endTime:endTime,
      }
      this.seelTypeParams.startTime = startTime
      this.seelTypeParams.endTime = endTime
      this.seelTypeParams.timeType = '3004'
      this.steelTime = '00'
      this.getClassifiedInfo(params)
      this.getPurchasingSalesDetailList()
    },
    selContrast() {
      this.contrast = !this.contrast;
      this.$set(this, "showFiltBool", this.contrast);
      if (this.contrastDate && this.contrast) {
        this.$set(this, "showFiltBool", true);
      } else {
        this.$set(this, "showFiltBool", false);
      }
    },
    dataSourceChange(val) {
      var a = this.defaultDataSourceType;
      this.fetchData();
    },
    changeType(value) {
      this.setHandleClick();
    },
    changeTime(value) {
          var params = {}
          params.timeType = value
          //前七天
          var myDate = new Date(); //获取今天日期
          var lastDate = new Date(); 
          this.seelTypeParams.timeType = value
          if(value === '3002'){
              lastDate.setDate(myDate.getDate() - 7);
              var arr = [lastDate,myDate]
              this.$set(this,"contrastDate",arr)
          }else if(value === '3003'){
            //前30天
            lastDate.setDate(myDate.getDate() - 30);
              var arr = [lastDate,myDate]
              this.$set(this,"contrastDate",arr)
          }
          this.getClassifiedInfo(params)
      this.getPurchasingSalesDetailList()

    },
    onFilter() {
      if (this.itemFactory.length > 1) {
        this.$set(this, "showFiltBool", true);
      }
      this.setHandleClick();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        // if (columnIndex === 0) {
          var self = this
        if(columnIndex === 0){
           if(rowIndex === 0){
             return{
               rowspan:10,
               colspan:1
             }
           }
        }
         self.lastFactoryName = row.departName
      // }
      
    },

    factoryHaveMoneyChart(data) {
      var chartData = []
      var inGetVal = 0
      data.forEach((item,id)=>{
        var obj = {}
        obj.value = item.realPrice
        inGetVal += inGetVal + item.realPrice
        obj.name = item.departName
        if(id === 0){
          obj.selected = true
        }
        chartData.push(obj)
      })
      var count = this.factoryHanveMoneyCount
      var option = {
        color:['#7553dc','#7553dc','#5282e6','#abdb9d','#3eb37f','#feca64','#ff8548','#fe6468','#e371b7'],
        title: {
          text: "应收账款"+inGetVal+"元",
          x: "center",
          textStyle: {
            color: "white"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}元 ({d}%)",
        },
        label: {
					normal: {
						position: 'inner',
						formatter: '{b}\n{d}% \n{c}\r元',
						fontSize:20
					}
				},
        legend: {
          orient: "vertical",
          left: "left",
          data: ["洛阳", "合肥", "西南", "广州","西安","无锡","武汉","郑州"],
          textStyle: {
            color: "white"
          }
        },
        series: [
          {
            name: "应收账款",
            type: "pie",
            selectedMode: 'single',
            selectedOffset: 20,
            radius: "80%",
            center: ["50%", "55%"],
            data: chartData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      var self = this;
      this.circulationChart(option,data,count,chart)
    },
    circulationChart(option,data,count,chart){
           var self = this
          var option = option 
          var data = data
          var count = count
          var r = count % data.length;
          option.series[0].data[r].selected = false;
          count += 1;
          var s = count % data.length;
          option.series[0].data[s].selected = true;
          self.$set(self,'factoryHanveMoneyCount',s)
          setTimeout(() => {
             if(count === 1){
                      self.$set(self,'factoryHaveMoneyChartRote',echarts.init(document.getElementById('factoryHaveMoneyChart')))
            }
                      self.factoryHaveMoneyChartRote.setOption(option);
            self.circulationChart(option,data,count,chart)
          }, 1000);
         
    },
    moneyValueChart() {
      var data = [
        { value: 335, name: "武汉分公司" ,type:'pie'},
        { value: 310, name: "郑州分公司" ,type:'pie'},
        { value: 234, name: "西安分公司" ,type:'pie'},
        { value: 135, name: "洛阳分公司" ,type:'pie'},
        { value: 1548, name: "西南分公司" ,type:'pie'},
        { value: 333, name: "合肥分公司" ,type:'pie'}
      ]
      var initData = {
        //需要给我传的数据
        yData: [data],
        color:['#7553dc','#5282e6','#abdb9d','#3eb37f','#feca64','#ff8548','#fe6468','#e371b7'],
        pieName:'资金周转率',
        legend: [],
        legendObj:{
                    formatter: function() {
                          return  3000 ;
                      },
                    show:true,
                    data:  [data[0].name],
                    left: 'center',
                    top: 'center',
                    icon: 'none',
                    align:'center',
                    textStyle: {
                        color: "#fff",
                        fontSize: 50,
                    
                    },
                },
        unit:'万元',
        title:{
                    text:'总资金',
                    left:'center',
                    top:'55%',
                    padding:[24,0],
                    textStyle:{
                        color:'#fff',
                        fontSize:20,
                        align:'center'
                    }
                },
        refName: "moneyValueChart",
        returnOption: "moneyValueChartOption",
        textColor: "white",
        radius:['50%','80%'],
        center:'50%',
        label: {
					normal: {
						// position: 'inner',
						formatter: '{b}\n\n{d}% ',
						fontSize:15
					}
				},
      };
      this.forEachFun(initData)
    },
    factoryChart(data) {
      //获取xData
      var yAxisName = ''
      var self = this
      this.factoryTargetArr.forEach(item=>{
        if(item.value === self.stateBussinessTargetDefault){
          yAxisName = item.label
        }
      })
      var xData = []
      var legend = []
      var yData = []
        yData.length = 3
      var itemLength = []
      data.forEach(item=>{
           xData.push(item.xData)
              //获取最多legend
            if(itemLength < item.item.length){
              var xLegend = []
              item.item.forEach(aa=>{
                xLegend.push(aa.xData) 
              })
              legend = xLegend
               //循环legend.length次按钢材类型取出每个公司数据
              item.item.forEach((cc,id)=>{
                  yData[id] = {}
                  yData[id].data = []
                  yData[id].type = 'bar'
              })
            }
      })
      data.forEach(item =>{
        item.item.forEach((cc,id)=>{
            yData[id].data.push(cc.value)
        })
      })
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: yData,
        color: ["#ffde25", "#a5e9db", "#2ca4bf","#415b90"],
        legend: legend,
        refName: "factoryChart",
        returnOption: "factoryChartOption",
        textColor: "#fff",
        stack: 'one',
        unit:'吨',
        yAxisName:yAxisName,
         xAxisLine:{
              axisLabel: {
                textStyle: {
                  color: "#fff"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#262544"
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#262544"
                }
              }
        },
        yAxisLine:{
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        },

        
      };
      this.forEachFun(initData);
    },
    clearSelArr() {
      this.$set(this, "itemFactory", []);
      this.$set(this, "showFiltBool", false);
    },
    setSaleOptionDataArr(data,id) {
        var dataSource = []
        var data0 = {}
        data0.data = []
        var data1 = {}
        data1.data = []
        var xData = []
      if( id === '60016003' ){
        data.forEach((item,index)=>{
          if(index === 0){
            item.forEach((a,id)=>{
              data0.data.push(a.value)
              xData.push(a.xData)
            })
          }else if(index === 1){
            item.forEach((a,id)=>{
              data1.data.push(a.value)
            })
          }
          data0.type = 'line'
          data1.type = 'line'
          dataSource = [data0,data1]
        })
        var saleOptionDataArr = [
          {
            name: "0",
            label: "采购销售",
            xData: xData,
            legend: ["销量", "毛利"],
            yData: dataSource,
            refName: "table0", //ref
            textColor: "white",
            yAxisName: "销量(吨)",
            unit:"单",
            grid:{
              top:'10%'
            },
            // color: ["green", "blue", "yellow"],
            linearColor:[ //渐变颜色，
              {
                startColor:'rgba(83, 139, 234,1)',
                endColor:'rgba(83, 139, 234,0.2)'
              },{
                startColor:'rgba(248, 111, 57,1)',
                endColor:'rgba(248, 111, 57,0.2)'
              }
          ],//渐变色
            xAxisLine:{
                axisLabel: {
                textStyle: {
                  color: "white"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#262544"
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#262544"
                }
              }
        },
        yAxisLine:{
          axisLabel: {
            textStyle: {
              color: "#ffff"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        },
          yAxis: {
            name: "毛利(万元)",
            type: "value",
            nameLocation: "end",
            // inverse: true,
            nameTextStyle: {
              color: "#fff"
            },
            axisLabel: {
              textStyle: {
                color: "white"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#262544"
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#262544"
              }
            }
          }
        }
      ];


      }else{
          data.forEach(item=>{
            data0.data.push(item.value)
            xData.push(item.xData)
          })
          data0.type = 'line'
          dataSource = [data0]
           var legend = []
           var yName = ''
          var unit = ''
          this.targetArr.forEach(item =>{
            if(item.value === id){
              legend.push(item.label)
              yName = item.label
              unit = item.unit
            }
          }) 
          var yAxisName = yName
          var saleOptionDataArr = [
                  {
                    name: "0",
                    label: "采购销售",
                    xData: xData,
                    legend: legend,
                    yData: dataSource,
                    refName: "table0", //ref
                    textColor: "#fff",
                    yAxisName: yAxisName,
                    unit:unit,
                    grid:{
                      top:'10%'
                    },
                    // color: ["green", "blue", "yellow"],
                    linearColor:[ //渐变颜色，
                      {
                        startColor:'rgba(83, 139, 234,1)',
                        endColor:'rgba(83, 139, 234,0.2)'
                      },{
                        startColor:'rgba(248, 111, 57,1)',
                        endColor:'rgba(248, 111, 57,0.2)'
                      }
                  ],//渐变色
                    xAxisLine:{
                        axisLabel: {
                          textStyle: {
                            color: "white"
                          }
                        },
                        axisLine: {
                          lineStyle: {
                            color: "#262544"
                          }
                        },
                        splitLine: {
                          show: false,
                          lineStyle: {
                            color: "#262544"
                          }
                        }
                  },
                  yAxisLine:{
                    axisLabel: {
                      textStyle: {
                        color: "#fff"
                      }
                    },
                    axisLine: {
                      lineStyle: {
                        color: "#262544"
                      }
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: "#262544"
                      }
                    }
                  },
                  }
                ];


      }
      
      this.initSeries(saleOptionDataArr);
    },
    //处理series
    initSeries(initData) {
      //多tabs图表   组装series
      var self = this;
      var tabChartsArr = self.$utils.returnTabChartsArr(initData);
      tabChartsArr.forEach((itemData, id) => {
        //返回option
        var itemData = this.$utils.returnTabsChartOption(itemData, id);
        this.$set(this.initDataArr, id, itemData);
      });
      this.setHandleClick();
    },
    setHandleClick(res) {
      //多tabs图表   重新实例化charts
      var self = this;
      if (res != undefined && res.index === "1") {
         if(self.factoryHaveMoneyChartRote){
              self.factoryHaveMoneyChartRote.clear()
              self.factoryHaveMoneyChartRote.dispose()
              }
        self.$set(this,'factoryHanveMoneyCount',0)
        self.getBranchOfficeAccountsReceivableList()
        // self.factoryHaveMoneyChart();
      }else if(res != undefined && res.index === "3"){
        //钢圈网
          self.$refs.gangQuan.fetchData()
      }else if(res != undefined && res.index === "2"){   
        this.getSteelList()
        this.getStockDetailsList()
        this.stockPriceChart()
        this.getSteelType()
      }
       else {
        setTimeout(function() {
          var ref = self.$refs["table" + self.activeName];
          ref[0].initChart();
        }, 0);
          //厂家库存分布
      this.factoryStorckDistributeChart()
      
      }

     
    },
    //库存指标搜索过滤
    gcSearch() {},
    forEachFun(initData) {
      //处理数据生成Option
      var option = this.$utils.returnItemSeries(initData);
      // this[initData.returnOption] = option;
      this.$set(this, initData.returnOption, option);
      var self = this;
      setTimeout(function() {
        if(self.$refs[initData.refName] && self.$refs[initData.refName][0]){
          self.$refs[initData.refName][0].initChart();
        }else{
          self.$refs[initData.refName].initChart();
        }
      }, 0);
    },
    fetchData() {
      this.getTarget()
      this.getSupplierProviderList()
      this.getClassifiedInfo()
      this.getPurchasingSalesDetailList()
      this.getBranchOfficeList()
      this.getPurchaseSaleDetailListForBranchOffice()
      var self = this
      setTimeout(() => {
         self.moneyValueChart();
      }, 10);
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>
<style>
.haveMoneyBottom {
}
.itemHanveMoneyTop {
  width: 100%;
  color: aliceblue;
  margin-top: 9px;
}
.haveMoneyTop {
  flex-direction: row;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid gray;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding:30px;
}
.haveMoney {
  padding: 20px;
}
.corcleCon {
  padding: 10px;
}
.corcleNum {
  width: 20px;
  height: 20px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  border-radius: 25px;
}
.tabsTextMargin {
  margin-left: 10px;
}

.tabsTextColor {
  color: white;
  margin-left: 10px;
}

.svgText {
 margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1rem;
    color: white;
    text-align: center;
}

.bigTitleCon {
  padding: 1em 0;
}

.iconHeadCon {
  text-align: center;
  width: 5em;
  height:5em;
  border-radius: 50%;
}

.flexWarpCon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 2em;
  padding: 0 0 30px 0;
}

.analysisCss .blockCon {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
  padding:10px
}
.saleNum {
  font-size: 1.2rem;
  padding: 10px 0 0 10px;
}

.card-con {
  display: flex;
  width: 100%;
  height: 5em;
  padding: 1em 0;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.analysisCss .card-text-con {
  float: left;
  line-height: 2.5;
  text-align: center;
  padding: 0 8px;
}

.week-con {
  margin: 0.625rem;
}

.chart-container {
  display: block;
  /*background:#0D182B*/
}

.barCharts {
  width: 100%;
  height: 26.875rem;
}
.iconHeadConCss {
  /* width: 100%;
  height: 130px; */
  text-align: center;
}

.flexRow{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 3rem;
}
.flexItem{
  width: 56px;
  background: #F6AD51;
  color:white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0 5px;

}
.factoryImg{
  width: 20px;
  height: 20px;
  margin:-5px;
}
.factoryImg:hover{
  cursor:pointer;
}
.factoryImgTop{
    transform: rotateZ(-180deg);
    transition: transform .3s,-webkit-transform .3s;
}
.factoryImgDown{
   transition: transform .3s,-webkit-transform .3s;
  transform: rotateZ(0deg);
}
.secFactory{
background: #1B1F28;
padding-left: 57px;
width:100%
}
.zTopTitleHead{
   float: left;
    color: white;
    font-size: 20px;
    padding: 17px;
}

/* select 选择框样式 */
.analysisCss .el-input__inner {
    border: 2px solid #F6AD51;
    color: #F6AD51;
}
.analysisCss .el-input__icon{
  color:#F6AD51
}
.el-select-dropdown__item.selected{
  color:white;
  background: #9d724b
}
.el-select-dropdown__item.selected.hover {
  color:white;
  background: #9d724b
}
.el-select-dropdown{
  background: transparent;
  box-shadow:0 2px 6px  #F6AD51
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color: #F6AD51;
}
.el-popper[x-placement^=bottom] .popper__arrow{
      border-bottom-color: #F6AD51;
}
.el-select:hover .el-input__inner{
      border-color: #F6AD51;
}
.el-select .el-input .el-select__caret{
      color: #F6AD51;
}
.el-select .el-input.is-focus .el-input__inner{
  border-color: #F6AD51;
}
.factoryTabClass .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background: #3b8dee;
    border-radius: 0;
}
.factoryTabClass .el-tabs--border-card{
  background: #262544;
}
.factoryTabClass .el-tabs__item{
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border:0
}
.factoryTabClass .el-tabs__nav-wrap{
  border-top-right-radius: 0;
  border-top-left-radius: 0
}
.factoryTabClass .el-tabs--border-card > .el-tabs__header{
  border-top-right-radius: 0;
  border-top-left-radius: 0
}
.myTabClass .factoryTabClass .el-tabs__nav-scroll {
    background: #262544;
    margin-bottom:0 
}
.factoryTabClass .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  border-right: 0;
  color:white;
  border:0;

}
.factoryTabClass .el-tabs__content{
  background: #262544;
  padding:0
}
.factoryClass .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  border:0
}
.factoryClass .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  margin:0
}

.factoryMoneyAssetTurnover .blueHeader{
  background:#3b8dee;
  text-align: center
}
.factoryMoneyAssetTurnover .el-table--border th, .el-table__fixed-right-patch{
  border-bottom: 1px solid #2f3543
}
.factoryMoneyAssetTurnover .el-table thead.is-group th{
  background:#3b8dee
}

.factoryMoneyAssetTurnover .el-table tr{
  background: #262544
}
.factoryMoneyAssetTurnover .el-table__body-wrapper{
  background: #262544
}
.factoryMoneyAssetTurnover .el-table th{
  background:#3b8dee
}

</style>

